<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                data: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.data = null;
            clearInterval(this.timer);
        },
        methods: {
            initChart(e) {
                if (e.cData.length !== 0) {
                    this.chart = echarts.init(document.getElementById(this.id));
                    let dataAxis = e.cLabel;
                    let data = e.cData;
                    let yMax = 500;
                    let dataShadow = [];
                    for (var i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                    }
                    this.data = {
                        title: {
                            top: 10,
                            left: 20,
                            text: e.title,
                            textStyle: {
                                color: '#3a3f63',
                                'font-weight': '500',
                                'font-size': '18px'
                            }
                        },
                        xAxis: {
                            data: dataAxis,
                            axisLabel: {
                                inside: true,
                                textStyle: {
                                    color: '#fff',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true
                            },
                            z: 10,
                        },
                        yAxis: {
                            axisLine: {
                                show: true
                            },
                            axisTick: {
                                show: true
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#999',
                                }
                            }
                        },
                        dataZoom: [{
                            type: 'inside'
                        }],
                        series: [{
                            type: 'bar',
                            barWidth: e.lineWidth || 50,
                            showBackground: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        color: "#000",
                                        fontSize: 14
                                    }
                                }
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#83bff6'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#188df0'
                                        },
                                        {
                                            offset: 1,
                                            color: '#188df0'
                                        }
                                    ]
                                )
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [{
                                                offset: 0,
                                                color: '#2378f7'
                                            },
                                            {
                                                offset: 0.7,
                                                color: '#2378f7'
                                            },
                                            {
                                                offset: 1,
                                                color: '#83bff6'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: data
                        }]
                    };
                    let _this = this;
                    _this.chart.setOption(this.data,true);
                    // _this.timer = setInterval(function() {
                    //     _this.chart.setOption({}, true);
                    //     _this.chart.setOption(_this.data, true);
                    // }, 10000);


                    // 监听点击事件
                    var zoomSize = 6;
                    _this.chart.on('click', function(params) {
                        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                        _this.chart.dispatchAction({
                            type: 'dataZoom',
                            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                        });
                    });
                } else {
                    // 以下是暂无数据显示样式(样式根据本身需求进行调整)
                    var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">${e.title}</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
                    document.getElementById(this.id).innerHTML = html
                    document.getElementById(this.id).removeAttribute('_echarts_instance_')
                }
                
            }
        }
    }
</script>
